<template>
	<view class="wrap">
		<cu-custom bgColor="bg-gradual-them" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">{{pageName}}</block>
		</cu-custom>

		<u-notice-bar mode="horizontal" :list="listBar"></u-notice-bar>


		<!-- 新版悬浮按钮-->
		<!-- 		<nav-index-button 
		:view="viewId"
		></nav-index-button> -->

		<!-- 悬浮球 -->
		<!-- 		<view>
			<drag-button :isDock="true" :existTabBar="true" @btnClick="goMessage(viewId)" />
		</view> -->


		<!-- 底部黏性标签 -->
		<view class="cu-bar bg-white tabbar border shop solid-top"
			style="position: fixed; bottom: 0;width: 100%; z-index: 9999;">
			<button class="action" open-type="share">
				<view class="cuIcon-share text-green">
					<!-- <view class="cu-tag badge"></view> -->
				</view> 分享
			</button>
			<view class="action text-orange" @click="goMessageBoard()">
				<view class="cuIcon-message"></view> 留言版
			</view>
			<view class="btn-group">
				<button style="width: 80%;" class="cu-btn bg-gradual-them round shadow-blur" @click="goAddlife(viewId)">
					<view class="cuIcon-edit"></view>
					<text style="padding-left: 5rpx;">添加日常记录</text>
				</button>
			</view>
		</view>



		<!-- 猫咪图片 -->
		<view class="uni-padding-wrap">
			<view class="page-section swiper">
				<view class="page-section-spacing" style="margin: auto;">
					<image class="center-box flex" :src="bannerImg" style="height: 400rpx; width: 100%; margin: auto;"
						mode="aspectFill"></image>
					<!-- src="https://img-blog.csdnimg.cn/20190605143635638.png" -->
				</view>
			</view>
		</view>


		<!-- 该猫咪  / 昵称  / 记录数  / 热度 -->
		<view style="box-shadow: 0px 5px 5px -5px rgba(0, 0, 0, 0.05);"
			class='padding flex text-center text-grey bg-white shadow-warp-my'>

			<view class='flex flex-sub flex-direction solid-right'>
				<view class="text-xl text-them">{{nickname}}</view>
				<view class="margin-top-sm">
					<text class='cuIcon-tag'></text> 昵称
				</view>
			</view>
			<view class='flex flex-sub flex-direction'>
				<view class="text-xl text-orange">{{allDaily}}</view>
				<view class="margin-top-sm">
					<text class='cuIcon-like'></text> 记录
				</view>
			</view>

			<view class='flex flex-sub flex-direction solid-right'>
				<view class="text-xl text-red">{{catHot}}</view>
				<view class="margin-top-sm">
					<text class='cuIcon-hot'></text> 热度
				</view>
			</view>
		</view>


		<!-- 用户上传的日常资料 -->

		<view class="cu-list menu-avatar comment solids-top cat-menu" v-for="(item, id) in allLifes" :key="id"
			v-show="item.catId !== 0">
			<view class="cu-item ">

				<!-- 用户头像 -->
				<image :src="item.avatar" mode="aspectFill" class="cu-avatar cat-head"></image>

				<!-- 用户姓名 -->
				<view class="content">
					<view class="text-grey">{{item.nickname}}</view>
					<view class="text-gray text-content text-df">
						{{item.catText}}
					</view>

					<!-- 图片 -->
					<view class="text-sm" style="background-color: #fcfcfc;margin-top: 10rpx;">
						<view class="flex">
							<view style="padding-left: 10rpx;"
								v-show="item.catImg1 != '' && item.catImg1 != null && item.catImg1 != undefined">
								<u-image @click="clickImgAll(0,item.catImg1,item.catImg2,item.catImg3)"
									:src="item.catImg1" :lazy-load="true" shape="square" width="160rpx" height="160rpx"
									:fade="true" duration="450" mode="aspectFill">
									<view slot="error" style="font-size: 15rpx;">加载失败</view>
								</u-image>
							</view>

							<view style="padding-left: 10rpx;"
								v-show="item.catImg2 != '' && item.catImg2 != null && item.catImg2 != undefined">
								<u-image @click="clickImgAll(1,item.catImg1,item.catImg2,item.catImg3)"
									:src="item.catImg2" :lazy-load="true" shape="square" width="160rpx" height="160rpx"
									:fade="true" duration="450" mode="aspectFill">
									<view slot="error" style="font-size: 15rpx;">加载失败</view>
								</u-image>
							</view>

							<view style="padding-left: 10rpx;"
								v-show="item.catImg3 != '' && item.catImg3 != null && item.catImg3 != undefined">
								<u-image @click="clickImgAll(2,item.catImg1,item.catImg2,item.catImg3)"
									:src="item.catImg3" :lazy-load="true" shape="square" width="160rpx" height="160rpx"
									:fade="true" duration="450" mode="aspectFill">
									<view slot="error" style="font-size: 15rpx;">加载失败</view>
								</u-image>
							</view>
						</view>
					</view>
					<view class="margin-top-sm flex justify-between">
						<view class="text-gray text-df cuIcon-time">{{' '}}{{item.createTime}}</view>
						<view>


							<!-- 0为没有点赞 -->
							<view class="demo-dislike" v-show="item.remark === 0" @click="userLiks(id)">
								<u-icon name="heart" color="#bdbeba" size="30"></u-icon>
								{{' '}}{{item.catLikes}}
							</view>


							<!-- 1为 点赞 -->
							<view class="demo-like" v-show="item.remark === 1">
								<u-icon name="heart-fill" color="#fa3534" size="30"></u-icon>
								{{' '}}{{item.catLikes}}
							</view>

						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部到底提升 -->
		<u-toast ref="uToast" />

		<!-- 拉大间距 -->
		<view style="height: 140rpx;width: 1rpx;"></view>

		<u-toast ref="uToast" />

	</view>
</template>

<script>
	import {
		getToken
	} from '@/utils/auth';
	// import dragButton from './components/drag-button';
	import imgData from "@/common/uiImg.js";
	var _this;


	export default {
		components: {

		},

		data() {
			return {
				pageName: '贵师院猫咪图鉴',
				listBar: [
					'猫猫小程序交流群：133808502'
				],
				loadStatus: 'loadmore',
				flowList: [],
				list: null,

				bannerImg: "https://img-blog.csdnimg.cn/20190605143635638.png",
				nickname: "拖鞋", // 名称


				allLifes: [{
						// openid:

						catId: 0, // 猫咪id

						avatar: 'https://img-blog.csdnimg.cn/3d43fe923d074f42bed49242265da5be.jpg', //分享人 头像

						nickname: '热心猫友',

						catText: '今日喂猫分享，大白好可爱！', // 分享日常

						catImg1: 'https://img-blog.csdnimg.cn/20210826141951774.jpg', // 照片
						catImg2: 'https://img-blog.csdnimg.cn/20210826141951774.jpg', // 照片
						catImg3: 'https://img-blog.csdnimg.cn/20210826141951774.jpg', // 照片

						createTime: '2022年11月5日', // 日期

						catLikes: 70, // 喜欢数

						remark: 0, // 获取数据的时候需要判断

						dailyId: 0,

					},

				],

				viewId: 0, // 猫咪编号判断

				pageNum: 0, // 页数
				pageSize: 5,

				openid: '', // openid

				isBottom: 0,

				catHot: 0,
				allDaily: 0,

			}
		},

		onLoad(option) {
			this.getOpenid(); // 获取用户openid

			this.viewId = option.id; // 获取猫咪编号
			console.log('catID:', this.viewId);

			this.getmessageData() // 获取猫咪资料

			this.getPage() // 获取分页数据

			this.getHot() // 获取热度 + 记录数

		},

		mounted() {
			_this = this;
		},

		onReachBottom() {
			// 判断是否到底了
			if (this.isBottom === 1) {
				console.log("到底了，不刷新 ")
				//弹窗
				//提示发送 到底了，不刷新
				this.$refs.uToast.show({
					title: '已经到底啦！喵~',
					type: 'warning',
					url: ''
				})
				return
			}

			console.log('执行刷新')
			if (this.isBottom === 0) {
				this.getPage()
			}
		},

		methods: {

			// 3张点击图片放大预览
			clickImgAll(index, img1, img2, img3) {
				let imgList
				if (img2 === "") {
					imgList = [img1]
				} else if (img3 === "") {
					imgList = [img1, img2]
				} else {
					imgList = [img1, img2, img3]
				}

				wx.previewImage({
					urls: imgList, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: imgList[index], // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},


			// 留言板
			goMessageBoard() {
				this.$refs.uToast.show({
					title: '还未开放此功能 ❤',
					type: 'warning',
					url: ''
				})
			},

			// 获取热度 + 记录数
			getHot() {

				// this.request('getCatHot', parseInt(this.viewId), 'POST').then(res=>{
				this.$u.api.getCatHot(this.viewId).then(res => {
					console.log("热度 + 记录数：", res)
					// 手动添加
					if (res.code == 200) {
						this.catHot = res.data.hot
						this.allDaily = res.data.allDaily
					}

				})
			},

			// 点赞方法  
			userLiks(index) {
				console.log(index)

				// 判断用户是否登陆
				if (this.openid == "") {
					this.$refs.uToast.show({
						title: '请先登陆哟 ❤',
						type: 'warning',
						url: ''
					})
					return
				}
				// 更改评论likes属性
				this.allLifes[index].remark = 1
				this.allLifes[index].catLikes += 1

				// 装填信息
				let aLikes = {}
				aLikes.dailyId = this.allLifes[index].dailyId // 评论id
				aLikes.openid = this.openid // openid

				// 发送信息
				// this.request('userLikes', aLikes, 'POST').then(res=>{
				this.$u.api.userLikes(aLikes).then(res => {
					// 
					if (res.code != 200) {
						this.$refs.uToast.show({
							title: '系统繁忙！喵~',
							type: 'warning',
							url: ''
						})

						this.allLifes[index].remark = 0
						this.allLifes[index].catLikes -= 1
					}

					console.log("点赞情况：", res)

				})

			},



			// 获取用户openid
			getOpenid() {
				let openid = getToken();
				if (openid) {
					this.openid = openid
				}
			},

			// 获取分页数据
			getPage() {
				// 1、装填信息
				let form = {}
				form.pageNum = this.pageNum
				form.pageSize = this.pageSize

				form.catId = parseInt(this.viewId)
				form.openid = this.openid

				// console.log()

				///2、发送请求
				// this.request('loadCatDailyInfo', form, 'POST').then(res=>{
				this.$u.api.loadCatDailyInfo(form).then(res => {
					console.log("res:", res)

					if (res.data.length < this.pageSize) {
						this.isBottom = 1 // 到底了
						console.log("到底了----")
						//提示发送 到底了，不刷新
						this.$refs.uToast.show({
							title: '已经到底啦！喵~',
							type: 'warning',
							url: ''
						})
						// console.log("this.res: ", this.allLifes)

					}

					// 页数+1
					this.pageNum++

					// TODO 数据填充
					this.allLifes = [...this.allLifes, ...res.data.map(item => {

						// id
						item.dailyId = item.id

						// 图片加工
						if (item.catImg1 != "") {
							item.catImg1 = this.myimgurl() + item.catImg1
						}
						if (item.catImg2 != "") {
							item.catImg2 = this.myimgurl() + item.catImg2
						}
						if (item.catImg3 != "") {
							item.catImg3 = this.myimgurl() + item.catImg3
						}

						// 时间加工
						item.createTime = item.createTime.split(" ")
						item.createTime = item.createTime[0]
						item.createTime = item.createTime.split("-")
						item.createTime = item.createTime[0] + "年" + item.createTime[1] + "月" + item
							.createTime[2] + "日"

						// 点赞判断
						if (item.remark == "已点赞") {
							item.remark = 1
						} else {
							item.remark = 0
						}
						return item

					})]
					console.log("this.allLifes: ", this.allLifes)
				})


			},

			// 跳转 添加页面
			goAddlife(id) {
				uni.navigateTo({
					url: '/subPages/catLife/addlife?id=' + id,
				});
			},

			// 跳转 猫咪详情
			goMessage(id) {
				uni.navigateTo({
					url: '../catView/message?id=' + id,
				});
			},

			// 获取 猫咪资料
			getmessageData() {
				this.request('loadCatInfo', 'GET').then(res => {
					// console.log("res:",res)
					if (res) {
						for (var i = 0; i < res.data.length; i++) {
							// 这里进行类型判断
							if (this.viewId == res.data[i].id) {

								this.bannerImg = this.myimgurl() + res.data[i].catImg; // 猫咪照片

								this.nickname = res.data[i].catName; // 猫咪昵称

							}
						}

						// console.log(catMsg)
						// this.recentyList = catMsg
						// console.log("recentyList:",this.recentyList)
					}
				})
			},

		}
	}
</script>

<style>
	page {
		background-color: #edfdff;
	}
</style>

<style lang="scss" scoped>
	/* 内容布局 start*/
	.cat-menu {
		background-color: rgba(255, 255, 255, 1);
		width: 90%;
		box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.05);
		border-radius: 15rpx !important;
		margin: auto;
		margin-top: 35rpx;
	}

	.center-box {
		color: #333333;
		width: 700rpx;
		background-color: #FFFFFF;
		margin: 0 auto;
		position: relative;
		margin-top: 20rpx;
	}


	.bxBox {
		position: relative;
		display: flex;
		/* padding: 0 30rpx; */
		min-height: 100rpx;
		/* background-color: #ffffff; */
		/* justify-content: space-between; */
		align-items: center;
		font-size: 30rpx;
		line-height: 1.6em;
		flex: 1;

		.bxImg {
			display: inline-block;
			margin-right: 10rpx;
			width: 1.6em;
			text-align: center;
		}
	}

	.serviceBox {
		border-radius: 25rpx;
		background-color: #f9f9f9;
		margin: 30rpx auto 0;

		image {
			width: 42rpx;
			height: 42rpx;
			margin-right: 8rpx;
			vertical-align: middle;
			margin-top: -6rpx;
		}
	}

	.cat-head {
		border-radius: 50%;
		width: 70rpx;
		height: 70rpx;
	}
	
	

</style>
